<template>
  	<div id="name">
    	<div class="wl-body">
      		<div class="top"></div>
      		<div class="bdds">
        		
				<div>
					<div class="mtp slink topchanger">
						<div class="xks" :class="{active:active==0}" @click="topchanger(0)">
							<!-- 全部 -->
							{{$t("m.qb")}}
						</div>
						<div class="xks" :class="{active:active==1}" @click="topchanger(1)">
							<!-- 持有 -->
							{{$t("m.chiyou")}}
						</div>
                        <div class="xks" :class="{active:active==2}" @click="topchanger(2)">
							<!-- 已到期 -->
							{{$t("m.yidaoqi")}}
						</div>
					</div>
				</div>
                <!-- 矿池 -->
				<van-pull-refresh v-model="isLoading" :success-text="$t('m.sxcg')" @refresh="onRefresh">
					<div class="pool">
						<van-list
						v-model="loading"
						:finished="finished"
						:finished-text="$t('m.nomore')"
						@load="onLoad"
						>
							<div class="item" v-for="item in dataList" :key="item.history.id">
								<div class="lf">
									<div class="title">
										<!-- <img src="../assets/images/pool_b.png" alt="" srcset=""> -->
										<img src="../assets/images/pool_u.png" alt="" srcset="">
										<!-- <img src="../assets/images/pool_f.png" alt="" srcset="">
										<img src="../assets/images/pool_h.png" alt="" srcset=""> -->
										<p>USDT挖矿 — DeFiner专题</p>
										<!-- 挖矿中 -->
										<span v-show="item.history.status==1">
											{{$t("m.wakuangzhong")}}
										</span>
										<!-- 待赎回 -->
										<!-- <span>
											{{$t("m.daishuhui")}}
										</span> -->
										<!-- 已赎回 -->
										<!-- <span>
											{{$t("m.yishuhui")}}
										</span> -->
										<!-- 复投 -->
										<!-- <span>
											{{$t("m.futou")}}
										</span> -->
									</div>
									<div class="btm">
										<div class="btm_item">
											<div class="item_title">
												<!-- 年化收益率 -->
												{{$t("m.nianhuashouyilv")}}
											</div>
											<div class="item_cont">
												{{item.product.radio*100}}%
											</div>
										</div>
										<div class="btm_item">
											<div class="item_title">
												<!-- 起投金额 -->
												{{$t("m.qitoujine")}}

											</div>
											<div class="item_cont">
												{{item.product.minPay}}USDT
											</div>
										</div>
										<div class="btm_item">
											<div class="item_title">
												<!-- 挖矿周期 -->
												{{$t("m.wakuangzhouqi")}}
											</div>
											<div class="item_cont">
												{{item.product.day}}天
											</div>
										</div>
										<!-- 赎回金额 -->
										<!-- <div class="btm_item">
											<div class="item_title">
												
												{{$t("m.shuhuijine")}}
											</div>
											<div class="item_cont">
												130.00USDT
											</div>
										</div> -->
									</div>
								</div>
								<!-- <div class="lr" v-show="item.history.status==1">
									{{$t("m.lijitouzi")}}
								</div> -->
							</div>
						</van-list>
						
					
					</div>
				</van-pull-refresh>
				
      		</div>
    	</div>
  	</div>
</template>

<script>
import countTo from "vue-count-to";
export default {
  	name: "name",
  	data() {
		return {
			dataList:[],
			loading: false,
			finished: false,
			page:1,//当前页码
			ext:0,//总页数
			isLoading: false,//下拉刷新
			active:0,
			isPublish: false,
			acchange: 0,
			acchangew: 0,
			s: "",
			sees: true,
		};
  	},
	computed: {
		
	},
	created() {
		this.getList()
	},
  	components: { countTo },
	mounted() {
		
	},
	destroyed() {
		
	},
	methods: {
		// 上拉加载
		onLoad() {
			this.page = this.page+1
			if (this.page<this.ext) {
				this.loading = true;
				this.getList()
			}
			
		},
		// 获取产品列表
		getList(){
			
			this.$get({
				url:'/ums-product-history/getHistoryList',
				data:{
					cid:this.active,
					pageNum:this.page,
					pageSize:10,
					trxAddress: this.$store.getters.userWallet
				},
				callback:(data)=>{
					this.loading = false
					this.isLoading = false
					console.log('-------产品列表----------')
					console.log(data)
					console.log('-------产品列表end----------')
					this.$nextTick(function(){
						if (data.code == 200) {
							this.dataList =this.dataList.concat(data.data)
							// 数据全部加载完成
							if (this.page>=data.ext) {
								this.finished = true;
							}
							this.ext = data.ext
						}
					})
					
				}
				
			})
			
		},
		// 下拉刷新
		onRefresh() {
			this.dataList=[]
			this.isLoading = true
			this.page = 1
			this.getList()
		},
		topchanger(e){
			this.active = e
			this.page = 1
			this.dataList=[]
			this.isLoading = true
			this.getList()
		}
	},
};
</script>

<style scoped>
	.pool{
		text-align: left;
		min-height: 85vh;
	}
	.pool .item{
		border-bottom: 0.02rem solid #0A52B2;
		padding: 0.27rem 0 0.3rem 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.pool .item .lf{
		min-width: calc(100% - 1.91rem);
	}
	.pool .item .lf .title{
		display: flex;
		align-items: center;
		font-size: 0.34rem;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #53FBFD;
		line-height: 0.59rem;
	}
	.pool .item .lf .title img{
		width: 0.34rem;
		height: 0.34rem;
		margin-right: 0.11rem;
	}
    .pool .item .lf .title span{
        display: block;
        width: 0.84rem;
        height: 0.24rem;
        padding: 0.03rem;
        text-align: center;
        line-height: 0.24rem;
        font-size: 0.3rem;
        white-space: nowrap;
        border: 1px solid #43D1D9;
        border-radius: 3px;
        margin-left: 0.1rem;
    }
	.pool .item .lf .btm{
		display: flex;
	}
	.pool .item .lf .btm .btm_item{
		margin-right: 0.35rem;
	}
	.pool .item .lf .btm .item_title,.pool .sh_price .title{
		font-size: 0.3rem;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #53FBFD;
		line-height: 0.33rem;
	}
	.pool .item .lf .btm .item_cont,.pool .sh_price p{
		color: #FFFFFF;
		margin-top: 0.2rem;
		font-size: 0.3rem;
	}
	.pool .item .lr{
		width: 1.61rem;
		height: 0.82rem;
		font-size: 0.3rem;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 0.82rem;
		text-align: center;
		background: url("../assets/images/zc_bg.png")center center no-repeat;
		background-size: 100%;
	}
</style>